<template>
    <div id="jx-app">
        <div class="right-side-content">
            <div v-if="rightSide" class="right-side" :class="{'w1360':isNarrow}">
                <ul>
                    <li class="go-top" @click="goTop" title="回到顶部"></li>
                    <li class="go-bottom" @click="goBottom" title="去底部"></li>
                </ul>
            </div>
        </div>
        <!-- <demo></demo> -->
        <transition name="fade">
           
            <router-view :websockMsg="redata" v-if="isRouterAlive"/>
        </transition>
        <!-- <keep-alive include="index">
            <router-view></router-view>
        </keep-alive> -->
        <div class="mirror-notes-box" v-noteDrag v-if="notesData.length > 0 && this.$route.path != '/Teaching/MyCourses/ShareVirtualMachine'">
            <transition name="el-fade-in-linear">
                <div id="notes-content" class="notes-content" v-show="show2">
                    <div class="notes-content-close" >
                        <i class="delete iconfont icon-Group-" @click="NoteSelectDelete"></i>
                        <i class="close" @click="NoteSelect"></i>
                    </div>
                    <div class="notes-content-list">
                        <div class="notes-item" v-for="(item, index) in notesData">
                            <span v-text="item.username"  @click="NotesLink(item)"></span>
                            <i class="iconfont icon-link" @click="CloseNotes(item)">x</i>
                        </div>
                    </div>
                </div>
            </transition>
            <div class="notes-select-bar" @click="NoteSelect">
                <i class="iconfont icon-tongzhi"></i>
                虚机共享信息
                <span v-show="shareStatus"></span>
            </div>
        </div>
        <div @click="signIn" :class="{signIn:flag ==true}" v-if="flag==true">签到啦, 请点我!</div>
        <!-- 学生端判断题webscoket -->
        <!-- <div class="judgeDetail" v-if="token == 'STUDENT' && studentFlag" >
            <p>判断题</p>
            <p>{{ studentInfo.quizName }}</p>
            <el-radio  v-model="radioStudent" label="1">正确</el-radio>
            <el-radio  v-model="radioStudent" label="2">错误</el-radio>
            <div class="button-style" @click="judgeSubmit(studentInfo.quizId)">提交</div>
        </div> -->
        <div class="judgeDetail" v-if="token == 'STUDENT' && globalFlag == 1" >
            <p>判断题</p>
            <p>{{ studentInfo.quizName }}</p>
            <el-radio  v-model="radioStudent" label="1">正确</el-radio>
            <el-radio  v-model="radioStudent" label="2">错误</el-radio>
            <div class="button-style" @click="judgeSubmit(studentInfo.quizId)">提交</div>
        </div>
    </div>
</template>
<script>
    import $ from "jquery";
    import {getToken} from '@/utils/auth' // 验权
    import NotesContent from "@/components/NotesContent"
    // import demo from "@/components/demo"

    export default {
        components: {
            NotesContent,
            //demo
        },
        provide () {
            return {
                 reload: this.reload
            }
        },
        data() {
            return {
                token: '',
                // 通知消息
                websock: null,
                over: null,
                flag: false,
                //侧边栏显示
                rightSide: false,
                isNarrow: false,
                redata: '',
                show2: false,
                //消息通知
                noteBottom: 0,
                noteTop: -179,
                notesData: [],
                // 分享状态
                shareStatus: false,

                //学生端回答
                studentInfo: '',
                radioStudent: '',
               // studentFlag: false,


                //刷新控制显隐
                isRouterAlive: true,
                globalFlag: 2
      
                
            }
        },
        created() {
            this.token = getToken()
            // 初始化socket
            this.windowScroll()
            this.windowResize()
            if(this.token == 'STUDENT' || this.token == 'TEACHER' || this.token == 'MARKET_TEACHER' || this.token == 'UNIVERSITY_TEACHER'){
               this.localSocket()
               this.NoteNotice()
            }
            // //监听页面切换 
            // window.addEventListener("visibilitychange",()=>{
            //     this.globalFlag = window.localStorage.getItem('globalFlag');
            // });
        },
      
        destroyed () {
            if(this.token == 'STUDENT' || this.token == 'TEACHER' || this.token == 'MARKET_TEACHER' || this.token == 'UNIVERSITY_TEACHER'){
               this.over()
            }
        },
        methods: {
            //yx为了刷新不闪白
            reload () {
                this.isRouterAlive = false
                this.$nextTick(function () {
                    this.isRouterAlive = true
                })
            },
            // 消息通知
            NoteNotice(){
                let self = this
                self.$http.get('/tes/experiment/share').then(response => {
                    let res = response.data
                    if(res.code == '200'){
                        if(res.data.length > 0){
                            self.notesData = res.data
                            self.shareStatus = true
                        }
                    }else{
                        self.$message.error(res.message)
                    }
                }).catch(err => {
                    console.log(err)
                })
            },
            // 虚拟共享信息
            NoteSelect(){
                let self = this
                self.shareStatus = false
                if(!self.show2){
                    self.$http.get('/tes/experiment/share').then(response => {
                        let res = response.data
                        if(res.code == '200'){
                            if(res.data.length == 0){
                                self.$message({
                                    message: '暂时没有信息',
                                    type: 'warning'
                                })
                            }else{
                                self.notesData = res.data
                                self.show2 = true
                            }

                        }else{
                            self.$message.error(res.message)
                        }
                    }).catch(err => {
                        console.log(err)
                    })
                }else{
                    self.show2 = false
                }
            },
            // 跳转分享虚机
            NotesLink(item) {
                let self = this
                let newWindow = window.open()
                let routeData = self.$router.resolve({
                    name: "ShareVirtualMachine",
                    query: {
                        courseId: item.userId,
                        chapterId: item.chapterId
                    }
                })
                // window.open(routeData.href, '_blank')
                newWindow.location.href = routeData.href
            },
            // 关闭分享共享虚机信息
            CloseNotes(item){
                let self = this
                self.$http.delete('/tes/experiment/share/'+item.userId+'/'+item.chapterId).then(response => {
                    let res = response.data
                    if(res.code == '200'){
                        for(let i = 0; i < self.notesData.length; i++){
                            if(item.userId == self.notesData[i].userId){
                                self.notesData.splice(i, 1)
                            }
                        }
                    }else{
                        self.$message.error(res.message)
                    }
                }).catch(err => {
                    console.log(err)
                })
            },
            // 删除虚机列表
            NoteSelectDelete(){
                let self = this
                self.$http.delete('/tes/experiment/share').then(response => {
                    let res = response.data
                    if(res.code == '200'){

                    } else {
                        self.$message.error(res.message);
                    }
                })
            },
            localSocket() {
                let self = this
                let hostname = window.location.host
                const wsuri = "ws://" + hostname + "/tes/ws/global"
                if ("WebSocket" in window) {
                    self.websock = new WebSocket(wsuri)

                    self.websock.onopen = self.websocketonopen()
                    self.websock.onmessage = self.websocketonmessage
                    self.over = () => {
                        self.websock.close()
                    }
                } else {
                    // 浏览器不支持 WebSocket
                    console.log("您的浏览器不支持 WebSocket!")
                }
            },
            websocketonopen() {
                console.log("open sucess")
            },
            websocketonmessage(e) {
                //数据接收
                let self = this;
                self.redata = JSON.parse(e.data);
            },
            goTop() {
                $("html,body").animate({ scrollTop: 0 }, 500);
            },
            goBottom() {
                $("html,body").animate({ scrollTop: $(document).height() }, 500);
            },
            //侧边栏显示
            windowScroll() {
                let that = this;
                $(window).scroll(function(){
                    let scrollTop = document.documentElement.scrollTop;
                    //console.log(scrollTop,666);
                    if (scrollTop > 900) {
                        that.rightSide = true;
                    } else {
                        that.rightSide = false;
                    }
                })
            },
            windowResize() {
                let that = this;
                $(function() {
                    let windowWidth = $(window).width();
                    if (windowWidth < 1367) {
                        that.isNarrow = true;
                    } else {
                        that.isNarrow = false;
                    }
                });
                $(window).resize(function() {
                    let windowWidth = $(window).width();
                    if (windowWidth < 1346) {
                        that.isNarrow = true;
                    } else {
                        that.isNarrow = false;
                    }
                });
            },
            signIn() {
                let self = this;
                self.$http.get("/tes/attendance/record").then(response => {
                    let res = response.data;
                    if (res.code == "200") {
                        self.$message({
                            message: "签到成功",
                            type: "success"
                        });
                        self.flag = false;
                        // self.InitWebSocket();
                    } else {
                        self.$message.error(res.message);
                        self.flag = false;
                    }
                });
            },
            //学生端提交问题
            judgeSubmit(quizId){
                let self = this
                if(self.radioStudent == ''){
                    self.$message({
                        message: '请选择正确答案',
                        type: 'warning'
                    })
                    return
                }
                
                self.$http.post('/tes/quiz/'+quizId+'/answer',{
                    answer: self.radioStudent == 1 ? true : false,
                    quizNumber: self.studentInfo.quizNumber
                }).then(response => {
                    let res = response.data
                    if(res.code == '200'){
                        self.$message({
                            message: '提交成功',
                            type: 'success',
                        })
                        this.globalFlag = 2
                        window.localStorage.setItem('globalFlag',2)

                    }else{
                        this.globalFlag = 2
                        self.$message.error(res.message)
                        window.localStorage.setItem('globalFlag',2)
              
                    }
                }).catch(err => {
                    console.log(err)
                })
            },
        },
        
        watch: {

            'redata': {
                handler: function(newval , oldval) {
                    let self = this
                    // type = 1 分享 2 关闭
                    if(newval.type == 1){
                        let redataJson = {}
                        redataJson.chapterId = newval.chapterId
                        redataJson.userId = newval.userId
                        redataJson.username = newval.username
                        for(let i = 0; i < self.notesData.length; i++){
                            if(newval.chapterId == self.notesData[i].chapterId && newval.userId == self.notesData[i].userId){
                                self.notesData.splice(i, 1)
                            }
                        }
                        self.notesData.push(redataJson)
                        self.shareStatus = true
                    }else if(newval.type == 2){
                        for(let i = 0; i < self.notesData.length; i++){
                            if(newval.chapterId == self.notesData[i].chapterId && newval.userId == self.notesData[i].userId){
                                self.notesData.splice(i, 1)
                            }
                        }
                    }else if(newval.type == 3){
                        for(let i = 0; i < self.notesData.length; i++){
                            if(newval.chapterId == self.notesData[i].chapterId && newval.shareUserId == self.notesData[i].userId){
                                self.notesData.splice(i, 1)
                            }
                        }
                    }else if(newval.type == 5){ // 学生提问
                        self.studentInfo = newval
                        self.radioStudent = ''
                        self.globalFlag = 1
                        window.localStorage.setItem('globalFlag', 1)
                    }
                    if (self.notesData.length == 0) {
                        self.shareStatus = false
                        self.show2 = false
                    }
                    if (newval.type == 4) {
                        self.flag = true;
                    }else if(newval.type == 8){
                        self.flag = false
                    }
                },
                deep: true
            }
        }
    };
</script>


<style lang="scss">
    .mirror-notes-box{
        width: 130px;
        height: 40px;
        z-index: 999;
        position: fixed;     /*定位*/
        bottom: 1px;
        right: 195px;
        -webkit-animation: spaces 2s;
        -moz-animation: spaces 2s;
        animation: spaces 2s;
        .notes-select-bar{
            position: absolute;
            width: 100%;
            height: 40px;
            line-height: 40px;
            color: #fff;
            background: #4d5368;
            border-radius: 2px;
            text-align: center;
            cursor: pointer;
            z-index: 10;
            span{
                width: 8px;
                height: 8px;
                display: inline-block;
                font-size: 14px;
                background: #c82011;
                border-radius: 8px;
                color: #fff;
                -webkit-animation: fadenum 2s infinite;
                -moz-animation: fadenum 2s infinite;
                animation:fadenum 2s infinite;
            }
            @-webkit-keyframes fadenum {

                /*设置内容由显示变为隐藏*/
                0% {
                    opacity: 1;
                }

                50% {
                    opacity: 0;
                }

                100% {
                    opacity: 1;
                }
            }

            @-moz-keyframes fadenum {

                /*设置内容由显示变为隐藏*/
                0% {
                    opacity: 1;
                }

                50% {
                    opacity: 0;
                }

                100% {
                    opacity: 1;
                }
            }

            @-o-keyframes fadenum {

                /*设置内容由显示变为隐藏*/
                0% {
                    opacity: 1;
                }

                50% {
                    opacity: 0;
                }

                100% {
                    opacity: 1;
                }
            }

            @keyframes fadenum {

                /*设置内容由显示变为隐藏*/
                0% {
                    opacity: 1;
                }

                50% {
                    opacity: 0;
                }

                100% {
                    opacity: 1;
                }
            }
        }
        .notes-content {
            position: absolute;
            height: 172px;
            top: -179px;
            width: 100%;
            background: #fff;
            z-index: 8;
            box-sizing: border-box;
            box-shadow: 0px 0 8px rgba(4, 0, 0, 0.2);
            .notes-content-close{
                height: 20px;
                line-height: 20px;

                overflow: hidden;
                i{
                    float: right;
                    cursor: pointer;
                    &.close{
                        width: 10px;
                        height: 2px;
                        margin: 10px;
                        background: #333333;
                    }
                    &.delete{
                        font-size: 16px;
                        margin-right: 10px;
                        margin-top: 6px;
                        color: #333333;
                        cursor: pointer;
                    }
                }
            }
            .notes-content-list{
                width: 100%;
                height: 152px;
                overflow-x: scroll;
                &::-webkit-scrollbar {
                    width: 3px;
                }

                &::-webkit-scrollbar-thumb {
                    background: #5281c6
                }
                .notes-item{
                    width: 90px;
                    margin-left: 10px;
                    height: 30px;
                    line-height: 30px;
                    border-bottom: solid 1px #d0d0d0;
                    padding: 0 5px 0 10px;
                    overflow: hidden;
                    cursor: pointer;
                    span{
                        float: left;
                        font-size: 12px;
                        color: #333333;
                        width: 58px;
                        overflow: hidden;
                        text-overflow: ellipsis;
                        white-space: nowrap;
                    }
                    i{
                        float: right;
                        font-size: 12px;
                        color: #5281c6;
                        cursor: pointer;
                    }
                }
            }
        }
    }
    .signIn {
        width: 130px;
        height: 42px;
        background: #4d5368;
        color: #fff;
        line-height: 42px;
        text-align: center;
        border-radius: 3px;
        position: fixed;
        right: 195px;
        top: 350px;
        z-index: 999;
        cursor: pointer;
        -webkit-animation: spaces 2s;
        -moz-animation: spaces 2s;
        animation: spaces 2s;
    }
        @-webkit-keyframes spaces {
        0% {
        }
        100% {
            right: 195px;
        }
        }
        @-moz-keyframes spaces {
        0% {
            right: -800px;
        }
        100% {
            right: 195px;
        }
        }
        @-o-keyframes spaces {
        0% {
            right: -800px;
        }
        100% {
            right: 195px;
        }
        }
        @keyframes spaces {
        0% {
            right: -800px;
        }
        100% {
            right: 195px;
        }
    }
/*侧边栏*/
.right-side-content {
    width: 1200px;
    margin: 0 auto;
    .right-side {
        position: fixed;
        top: 300px;
        margin-left: 1240px;
        z-index: 1;
        li {
        cursor: pointer;
        width: 40px;
        text-align: center;
        overflow: hidden;
        margin-top: -1px;
        .iconfont {
            font-size: 40px;
        }
        &:hover {
            color: #385899;
            border-color: #385899;
        }
        }
        .go-top {
        width: 40px;
        height: 40px;
        background: url("./assets/images/go-top.png") no-repeat 0 0;
        &:hover {
            background: url("./assets/images/go-top-hover.png") no-repeat 0 0;
        }
        }
        .go-bottom {
        width: 40px;
        height: 40px;
        background: url("./assets/images/go-top.png") no-repeat 0 0;
        margin-top: 10px;
        transform: rotate(180deg);
        &:hover {
            background: url("./assets/images/go-top-hover.png") no-repeat 0 0;
        }
        }
    }
    .right-side.w1360 {
        margin-left: 1210px;
    }
}
// 提问笔记
.judgeDetail{
    width: 300px;
    min-height: 100px;
    background: #fff;
    position: fixed;
    top: 260px;
    right: 25px;
    border-radius: 3px;
    // box-shadow: 0 2px 3px  #eee;
    padding: 20px 30px;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.05);
    z-index: 10;
    p{
        line-height: 25px;
        margin-bottom: 10px
    }
}
</style>
